<template>
  <div>
    <el-dialog
      ref="dialog-Map"
      :visible.sync="dialogVisible"
      :title="imgType==='卡面'?'卡面系统图库':'LOGO系统图库'"
      width="750px"
      append-to-body
      @close="close"
    >
      <el-row :gutter="16" class="dialog-Map">
        <el-col v-for="(item, index) in list" :key="index" :span="8">
          <div @click="choose(item,index)">
            <el-card :body-style="{ padding: '0px' }" shadow="always">
              <div :class="imgType==='卡面'?'card-img':'logo-img'">
                <img :src="fileBaseUrl+item">
              </div>
              <div class="bottom">
                <div class="title">图 {{ index+1 }}</div>
                <svg-icon :icon-class="index==activeItemIndex?'s-i-tick-active':'s-i-tick'" />
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <!-- 分页 -->
      <pagination-direction
        v-if="paginationConfig.total!==0"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      />
      <span slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button size="small" round type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    imgType: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, prev, pager, next', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 9 // 每页条数-默认10
      },
      resolve: null,
      reject: null,
      dialogVisible: false,
      activeItem: null,
      activeItemIndex: null,
      list: [],
      allCardImg: [
        'card/card_01.png',
        'card/card_02.png',
        'card/card_03.png',
        'card/card_04.png',
        'card/card_05.png',
        'card/card_06.png',
        'card/card_07.png',
        'card/card_08.png',
        'card/card_09.png',
        'card/card_10.png',
        'card/card_11.png',
        'card/card_12.png',
        'card/card_13.png',
        'card/card_14.png',
        'card/card_15.png',
        'card/card_16.png',
        'card/card_17.png',
        'card/card_18.png',
        'card/card_19.png',
        'card/card_20.png',
        'card/card_21.png',
        'card/card_22.png',
        'card/card_23.png',
        'card/card_24.png',
        'card/card_25.png',
        'card/card_26.png',
        'card/card_27.png',
        'card/card_28.png',
        'card/card_29.png',
        'card/card_30.png',
        'card/card_31.png',
        'card/card_32.png',
        'card/card_33.png',
        'card/card_34.png',
        'card/card_35.png'
      ],
      allLogoImg: [
        'business/logo/kun_store.jpg',
        'business/logo/kun_bag.png',
        'business/logo/kun_deal.png',
        'business/logo/kun_food.png',
        'business/logo/kun_gym.png',
        'business/logo/kun_mortarboard.png',
        'business/logo/kun_paint.png'
      ]
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  mounted() {},
  methods: {
    // 打开
    open() {
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.initData()
      this.dialogVisible = true
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    close() {
      this.activeItem = null
      this.activeItemIndex = null
    },

    // 获取数据
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      if (this.imgType === '卡面') {
        switch (page) {
          case 1:
            this.list = this.allCardImg.slice(0, 9)
            break
          case 2:
            this.list = this.allCardImg.slice(9, 18)
            break
          case 3:
            this.list = this.allCardImg.slice(18, 27)
            break
          case 4:
            this.list = this.allCardImg.slice(27, 36)
            break
        }
        this.paginationConfig.total = this.allCardImg.length
      } else {
        this.list = this.allLogoImg
        this.paginationConfig.total = this.allLogoImg.length
      }
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    },

    choose(item, index) {
      this.activeItem = item
      this.activeItemIndex = index
    },

    // 选择
    handleSubmit() {
      if (this.activeItem) {
        this.resolve && this.resolve(this.activeItem)
        this.hide()
      } else {
        this.hide()
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 图库 */
  .dialog-Map {
    .el-col {
      margin-bottom: 16px;
      .card-img {
        padding: 10px 10px 0 10px;
        img {
          width: 100%;
          height: 114px;
          margin: 0 auto;
          border-radius: 6px;
        }
      }
      .logo-img {
        padding: 10px 10px 0 10px;
        img {
          display: block;
          width: 114px;
          height: 114px;
          margin: 0 auto;
          border-radius: 6px;
        }
      }
      .bottom {
        position: relative;
        .title {
          padding: 10px 10px 10px 10px;
          text-align: center;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        svg {
          position: absolute;
          right: 5px;
          top: 50%;
          width: 20px;
          height: 20px;
          color: #e6e6e6;
          transform: translateY(-50%);
        }
      }
    }
  }
</style>
